<template>
	<view class="videoBox" @click="videoStatus">
		<video id="myVideo" :loop="true" :http-cache="true" enable-play-gesture :src="content" autoplay
			style='width:100vw;height: 100vh; background-color: #000000; z-index: -1;'></video>
		<view class="info">
			<view class="title">
				{{title?title:''}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: '',
				content: '',
				video: null,
				play: false
			}
		},
		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			} else if (option.url) {
				this.content = option.url
			}

		},

		methods: {
			videoStatus() {
				this.video = uni.createVideoContext('myVideo')
				if (this.play) {
					this.video.pause()
					this.play = false
				} else {
					this.video.play()
					this.play = true
				}
			},
			async getDetail(id) {
				let res = await this.$api.getHelpListDetail({
					id
				})
				if (res.success) {
					console.log(res.result);
					let {
						content,
						title
					} = res.result
					this.content = content || ""
					this.title = title || ""
					this.play = true
				} else {
					uni.showToast({
						title: '查询失败正在返回上一页',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)

				}
			},


		}
	}
</script>


<style lang="scss" scoped>
	.videoBox {
		height: 100%;
	}

	.info {
		width: 100%;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 39rpx;
		padding: 32rpx;
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		position: fixed;
		bottom: 0;
		box-sizing: border-box;

		.title {
			height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 42rpx;
			margin-bottom: 16rpx;
		}

		.content {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
	}
</style>